<!--
train-list
中间部分的列表组件
-->
<template>
    <div class="train-list">
        <!-- 这里是几个菜单？？TODO -->
        <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect">
            <el-menu-item index="2-1">广铁集团</el-menu-item>
            <el-menu-item index="2-1">广州电务段</el-menu-item>
            <el-menu-item index="2-1">长沙电务段</el-menu-item>
            <el-menu-item index="2-1">惠州电务段</el-menu-item>
            <el-menu-item index="2-1">海口综合维修段</el-menu-item>
        </el-menu>
        <div class="list-border top"></div>
        <div class="list-border right"></div>
        <div class="list-border bottom"></div>
        <div class="list-border left"></div>
        <!-- 这里是列表数据 -->
        <div class="wran-list">
            <ul
            class="ul-wrapper"
            v-for="(item, index) in list"
            :key="index"
            >
                <li
                :style="getStyle(item)">
                </li>
            </ul>
            <!-- 数据
            "daysOfSafe": 31,
            "workerNumber": 2233,
            "trainNumber": 505
            -->
            <div class="wran-list-wrapper">
                <ul
                @mouseover="handleMouseover($event)"
                @mouseout="handleMouseout"
                v-for="(listItem, index) in trainList"
                :key="listItem.deptName"
                class="wran-list-nums"
                >
                    <li :class="`wl-t${index}1`">{{ listItem.daysOfSafe }}</li>
                    <li :class="`wl-t${index}2`">{{ listItem.workerNumber }}</li>
                    <li :class="`wl-t${index}3`">{{ listItem.trainNumber }}</li>
                </ul>
            </div>
            <!-- tip 提示信息 -->
            <div v-show="showTip1" class="li-tip li-tip1">
                安全生产天数
            </div>
            <div v-show="showTip2" class="li-tip li-tip2">
                现有职工人数
            </div>
            <div v-show="showTip3" class="li-tip li-tip3">
                配属动车组
            </div>
        </div>
    </div>
</template>

<script>
import {
    getTrainList, // 获取列表的接口
} from '@/apis';

export default {
    name: 'train-list',
    components: {},
    data() {
        return {
            // 列表的背景图片
            imgs: {
                safe: require('../../assets/safe.png'),
                man: require('../../assets/man.png'),
                train: require('../../assets/train.png'),
            },
            list: [{
                img: 'safe',
                title: '安全生产天数',
            }, {
                img: 'man',
                title: '现有职工人数',
            }, {
                img: 'train',
                title: '配属动车组提示',
            }],
            activeIndex: '1',
            // 列表数据
            trainList: [],
            showTip1: false,
            showTip2: false,
            showTip3: false,
        };
    },
    methods: {
        // 点击菜单变换
        handleSelect() {},

        // 获取样式
        getStyle(item) {
            return {
                width: '100%',
                height: '100%',
                background: `url(${this.imgs[item.img]}) no-repeat center center`,
                backgroundSize: '100% 100%',
            };
        },

        // 获取列表
        getList() {
            getTrainList().then((res) => {
                const {
                    data,
                    code,
                } = res.data;
                if (code === 200) {
                    this.trainList = data;
                }
            }).catch((err) => {
                window.console.log('获取列表', err);
            });
        },

        // 鼠标悬浮
        handleMouseover(e) {
            const CLASS_FLAG = e.target.className;
            const NUM = CLASS_FLAG.slice(-1);
            this.showTip1 = false;
            this.showTip2 = false;
            this.showTip3 = false;
            this[`showTip${NUM}`] = true;
        },

        // 鼠标离开
        handleMouseout(e) {
            const CLASS_FLAG = e.target.className;
            const NUM = CLASS_FLAG.slice(-1);
            this.showTip1 = false;
            this.showTip2 = false;
            this.showTip3 = false;
            this[`showTip${NUM}`] = false;
        },
    },
    created() {
        this.getList();
    },
};
</script>
<style lang='scss'>
.train-list {
    width: 100%;
    height: 100%;
    position: relative;

    .list-border {
        position: absolute;
        width: .444rem;
        height: .444rem;
    }

    .top {
        top: 0;
        left: 0;
        background: url('../../assets/t.png') no-repeat center center;
        background-size: 100% 100%;
    }

    .right {
        top: 0;
        right: 0;
        background: url('../../assets/right.png') no-repeat center center;
        background-size: 100% 100%;
    }

    .bottom {
        bottom: 0;
        right: 0;
        background: url('../../assets/b.png') no-repeat center center;
        background-size: 100% 100%;
    }

    .left {
        bottom: 0;
        left: 0;
        background: url('../../assets/l.png') no-repeat center center;
        background-size: 100% 100%;
    }

    .el-menu.el-menu--horizontal {
        border: none;
        background: transparent;

        .el-menu-item,
        .el-submenu{
            width: 20%;
            color: #fff;
            height: .557rem;
            line-height: .557rem;
            text-align: center;
        }

        .el-menu-item:hover,
        .el-submenu:hover {
            background: transparent;
        }
    }

    .el-menu--horizontal>.el-submenu .el-submenu__title {
        width: 100%;
        color: #fff;
        height: 24px;
        line-height: 24px;
        text-align: center;
    }

    .el-menu--horizontal>.el-submenu .el-submenu__title {
        background: transparent;
    }

    .el-menu-item {
        font-size: .3889rem /* 14/80 */;
    }

    .wran-list {
        width: 100%;
        height: calc(100% - .557rem);
        box-sizing: border-box;
        padding: .15rem 0;
        position: relative;

        .li-tip {
            position: absolute;
            font-size: .33rem;
            padding: .33rem;
            color: #fff;
            background: rgb(0,0,0);
            z-index: 10;
        }

        .li-tip1 {
            top: -2%;
            left: 6%;
        }

        .li-tip2 {
            top: 30%;
            left: 6%;
        }

        .li-tip3 {
            bottom: 0;
            left: 6%;
        }

        ul.ul-wrapper {
            width: 100%;
            height: 33.3%;
            position: relative;
            li {
                width: 100%;

                div {
                    width: 20%;
                }
            }
        }

        &-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: .278rem 0;
            overflow: hidden;

            .wran-list-nums {
                width: 20%;
                height: 100%;
                float: left;

                li {
                    height: 33.3%;
                    box-sizing: border-box;
                    padding-top: .11rem;
                    /* padding-right: .1rem; */
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: .3889rem;
                    color: #48E5F6;
                }

                &:first-child {
                    li {
                        display: flex;
                        padding-top: 0;
                        align-items: center;
                    }
                }
            }
        }

    }
}
</style>
